<template>
  <view class="main">
    <view :class="[hasScroll ? 'bgWhite' : '', 'i-nav']" :style="{ height: statusNavBarHeight + 'px' }">
      <view class="status-bar"> </view>
      <view class="logo" :style="{ position: 'absolute', top: navBarTop + 'px' }">
        <img :src="hasScroll ? logoSrc4 : logoSrc3" alt="万户健康项目" srcset="" />
      </view>
    </view>
    <!-- 背景心形图片 -->
    <view class="i-bg-img"></view>

    <!-- 头部家人部分 -->
    <view v-if="hadLogin" class="family">
      <view class="family-bg-red"></view>
      <view class="family-content">
        <!-- <view class="family-line"></view> -->
        <scroll-view class="scroll-view_H" scroll-x="true" :scroll-left="familyScrollLeft">
          <view class="f-inner">
            <view
              v-for="(item, index) in familyList"
              :key="index"
              :class="['f-item', familyIndex === index ? 'active' : '']"
              @click="changePerson(index, 'click')"
            >
              <view
                :class="[
                  'f-logo',
                  item.relation === 1 ? 'f-logo-self' : '',
                  index % 2 === 0 ? 'f-b-imgw-boy' : 'f-b-imgw-girl'
                ]"
              >
                <image :src="item.src" :alt="item.insuredName" class="f-logo-img" />
              </view>
              <view :class="['f-name', familyIndex === index ? 'active' : '']">{{ item.memberName }}</view>
              <!-- <view v-if="familyIndex === index" class="f-san"></view> -->
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- <view class="family-bg-white"></view> -->
    </view>
    <!-- 用户购买的所有服务单 -->
    <view class="order-wrap">
      <!-- loading 为false表示已经发过请求，确实没有数据 -->
      <view v-if="hadLogin" class="order">
        <view class="pkg">
          <view class="healthPannel">
            <view class="radiosListWrap">
              <!-- <div v-if="loading" class="radio-loading">
                <img :src="bLoadingPng" alt="loading" />
              </div> -->

              <view class="radiosList" @click="goInsuranceList">
                <view class="icon"><img :src="sListPng" /></view>
                <view class="name">保单服务</view>
              </view>

              <!-- <view v-if="power" class="radiosList" @click="goIllForm">
                <view class="icon icon-red icon-expire">
                  <img :src="iconMoneyPng" />
                </view>
                <view :class="['name']">理赔服务</view>
              </view> -->
              <view class="radiosList bgOrigin" @click="startReportTalk">
                <view class="icon icon-expire">
                  <img :src="healthAssIconPng" />
                </view>
                <view :class="['name']">健康评估</view>
              </view>

              <view class="radiosList" @click="startHealthyPage">
                <view class="icon"><img :src="healthIconPng" /></view>
                <view class="name">健康档案</view>
              </view>

              <view class="radiosList" @click="healthReport">
                <view class="icon">
                  <view v-if="isMark" class="mark"></view>
                  <img :src="assHiltoryPng" />
                </view>
                <view class="name">健康报告</view>
              </view>

              <view class="radiosList" @click="callDoctor">
                <view class="icon">
                  <img :src="doctorPng" />
                </view>
                <view class="name">家医咨询</view>
              </view>

              <view class="radiosList" @click="goAskDoctorHistory">
                <view class="icon"><img :src="wzjlPng" /></view>
                <view class="name">咨询记录</view>
              </view>

              <view class="radiosList" @click="goServiceList">
                <view class="icon"><img :src="sListPng" /></view>
                <view class="name">订单管理</view>
              </view>

              <view v-if="familyIndex === 0" class="radiosList" @click="goFamilyMember">
                <view class="icon"><img :src="require('./../../static/icon/f-m-icon.png')" /></view>
                <view class="name">成员管理</view>
              </view>

              <view v-if="showHealthExaminationBtn" class="radiosList" @click="physicalExamination">
                <view class="icon icon-red icon-expire">
                  <img :src="iconCheckPng" />
                </view>
                <view :class="['name']">体检服务</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view v-else class="unLogin" @click="goLogin">
        <view class="img"><img :src="require('@/static/index/unLogin.png')" /></view>
        <view class="name">欢迎加入万户健康服务计划</view>
        <view class="loginBtn"><span>登录/注册</span></view>
      </view>

      <!-- 服务计划 -->
      <view v-if="welfarePlanList.length > 0" class="plan">
        <view class="k-title class-title">
          服务套餐
          <span class="class-more" @click="getMoreService">更多服务</span>
          <span class="class-right"><img :src="rightIcon" /></span>
        </view>
        <swiper class="plan-swiper" autoplay :circular="true" :interval="2000">
          <swiper-item v-for="(item, index) in welfarePlanList" :key="index" @click="goWelfarePlan(item, index)">
            <view class="plan-img">
              <img :src="item.path" :alt="item.title" />
            </view>
          </swiper-item>
        </swiper>
      </view>

      <!-- 健康课 -->
      <view v-if="classVideoData.length > 0" class="know">
        <view class="k-title class-title">
          健康课
          <span class="class-more" @click="goWebView">更多</span>
          <span class="class-right"><img :src="rightIcon" /></span>
        </view>
        <view class="classList">
          <view v-for="item in classVideoData" :key="item.id" class="list" @click="goVideoDetails(item.id)">
            <view class="images"><img :src="item.videoCover" mode="heightFix" /></view>
            <view class="name">{{ item.title }}</view>
          </view>
        </view>
      </view>
      <!-- 涨知识 -->
      <view class="know">
        <view class="k-title class-title"
          >涨知识
          <span class="class-more" @click="goKnowledge">更多</span>
          <span class="class-right"><img :src="rightIcon" /></span>
        </view>
        <view class="k-swiper" autoplay :circular="true" :interval="2000">
          <view @click="goLearn(knowledgeList[0])">
            <view class="k-img">
              <img :src="knowledgeList[0].imgs[0]" :alt="knowledgeList[0].title" />
              <!-- <view class="k-img-btn" >涨知识</view> -->
            </view>
          </view>
        </view>
        <view class="k-item-wrap">
          <view v-for="(item, index) in knowledgeListPicArt" :key="index" class="k-item" @click="goLearn(item, index)">
            <view class="k-logo">
              <image :src="item.imgs[0]" mode="aspectFit" />
            </view>
            <view class="k-des">
              {{ item.title }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
// 服务页接口  获取当前用户的服务订单
import { getFamilyData, getInsuranceOrder } from '@/api/service.js';
import { reportAll } from '@/api/assessQuestion';
import logoSrc3 from '@/static/index/logo3.png';
import logoSrc4 from '@/static/index/logo4.png';

import { getUserInfoByPatientId, getCanAssistanceApply } from '@/api/join.js';

// 引入统计
import { tongji } from '@/utils/tools.js';

// 保障、非保障图片地址

import { commonProjectType } from '@/common/baseUrl.js';
import { getAds } from '@/api/index.js';

import iconCheckPng from '@/static/icon/icon-check.png';
import iconMoneyPng from '@/static/icon/iconmoney.png';
import healthAssIconPng from '@/static/icon/healthAssIcon.png';
import wzjlPng from '@/static/icon/wzjl.png';
import assHiltoryPng from '@/static/icon/assHiltory.png';
import healthIconPng from '@/static/icon/healthIcon.png';
import sListPng from '@/static/icon/s-list.png';
import bLoadingPng from '@/static/icon/bloading.png';
import { getArticles } from '@/api/welfare';
import rightIcon from '@/static/icon/right.png';
let doctorPng =
  'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/icon/icon-doctor.png';

export default {
  data() {
    return {
      rightIcon,
      hasScroll: false,
      navBarTop: 4, // 小程序导航的高度,
      statusNavBarHeight: 68, // 状态栏总高度，默认68px
      logoSrc3,
      logoSrc4,
      iconCheckPng,
      healthAssIconPng,
      wzjlPng,
      assHiltoryPng,
      healthIconPng,
      sListPng,
      bLoadingPng,
      iconMoneyPng,
      doctorPng,
      patientId: '',
      familyList: [], // 默认必须有当前登录人
      familyIndex: 0,
      userInfo: {},

      familyScrollLeft: 0,
      showHealthAssessmentBtn: false,
      showHealthExaminationBtn: false,
      // isHealthExaminationBtnExpire: true,
      onLoadPatientId: '',
      isMark: false, // 是否有未读报告
      welfarePlanList: [],
      knowledgeList: [],
      knowledgeListPicArt: [],
      currentPatientHasVideoService: 0, // 当前用户是否有问诊记录
      option: {},
      loading: true,
      power: false,
      classVideoData: [],
      hadLogin: false
    };
  },
  onPageScroll(obj) {
    if (!this.hasScroll && obj.scrollTop > 10) {
      this.hasScroll = true;
    } else if (this.hasScroll && obj.scrollTop < 10) {
      this.hasScroll = false;
    }
  },
  onShareAppMessage: () => {
    return {
      title: '万户健康——家庭健康整体解决方案',
      path: '/pages/index/index',
      imageUrl:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-community/zzjj.png'
    };
  },
  onShareTimeline: () => {
    return {
      title: '万户健康——家庭健康整体解决方案',
      query: '/pages/index/index',
      imageUrl:
        'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-community/zzjj.png'
    };
  },
  onLoad(option) {
    this.option = option;
    // 设置导航条高度
    this.setNavigationBar();
    // 获取广告位
    getAds('万户健康小程序-首页-服务计划轮播').then((res) => {
      if (res.code === 0) {
        this.welfarePlanList = res.data || [];
        this.welfarePlanList.forEach((item) => {
          item.url = item.url && item.url.replace(/https?:\/\//, '');
          if (item.url && item.url[0] !== '/') {
            item.url = '/' + item.url;
          }
        });
      } else {
        uni.showToast({ title: '获取服务计划广告失败' });
      }
    });

    // 获取涨知识
    this.getKnowledgeList();
    // 获取视频
    this.getVideoListObj();

    // 用户登录的时候才执行下面这个
    if (this.$store.state.join.patientid) {
      this.hadLogin = true;
      this.afterOnload(option);
    } else {
      this.hadLogin = false;
    }
  },
  methods: {
    setNavigationBar() {
      // 参考链接 https://blog.csdn.net/Blablabla_/article/details/102466384
      // 设置导航条
      let info = wx.getSystemInfoSync();
      let statusBarHeight = info.statusBarHeight;
      const menuButtonObject = wx.getMenuButtonBoundingClientRect();
      const { top, height } = menuButtonObject;
      this.statusNavBarHeight = height + (top - statusBarHeight) * 2 + statusBarHeight;
      this.navBarTop = (height - 36) / 2 + top; // 36 为胶囊按钮的高度
    },
    goLogin(url) {
      const routes = getCurrentPages();
      const routesSrc = routes[routes.length - 1].route;
      const curRoute = url && typeof url === 'string' ? url : routesSrc; // 获取当前页面路由
      this.$store.commit('join/SET_REFERERS', curRoute.startsWith('/pages') ? `${curRoute}` : `/${curRoute}`);
      this.$wxPromise.navigateTo({
        url: '/pages/join/index'
      });
    },
    goInsuranceList() {
      this.$wxPromise.navigateTo({
        url: '/pages/index/insuranceList'
      });
    },
    callDoctor() {
      this.$wxPromise.navigateTo({
        url: '/pagesC/videoDoctor/index?patientId=' + this.patientId
      });
    },
    goWebView() {
      let url = '/pages/jump_web/index?urls=health';
      this.$wxPromise.navigateTo({
        url: url
      });
    },
    goLearn(item, index) {
      // console.log('goStory item:',item)
      if (!item.id) return;
      this.$wxPromise.navigateTo({
        url: '/pages/learn/detail?id=' + item.id
      });
      if (index === undefined) {
        tongji('db71cc3d-9a3b-42bd-a66e-8d0d0e2c8634');
      } else {
        switch (index) {
          case 0:
            tongji('41a07385-8977-40e9-8f8b-4b45c7f64978');
            break;
          case 1:
            tongji('e8991c9d-3490-433e-9b49-4ad28b2ff671');
            break;
        }
      }
    },
    goVideoDetails(id) {
      let url = `/pages/jump_web/index?urls=healthClass&id=${id}`;
      this.$wxPromise.navigateTo({
        url: url
      });
    },
    getMoreService() {
      // 更多
      tongji('29368023-e228-49dc-954e-4c9897acce2c');
      this.jumpPage('/pagesC/service/index');
    },
    goWelfarePlan(item, index) {
      // console.log('goWelfarePlan item:', item);
      // this.$wxPromise.navigateTo({
      //   url: `/pagesC/service/detail?id=${item.id}`
      // });
      if (item.url) {
        let url = item.url;
        const id = url.split('?id=')[1];
        this.$store.commit('join/SET_COMMUNITYSERVICEID', id);
        url = url.replace('http://', '/');
        this.$wxPromise.navigateTo({
          url: url
        });
      }
      switch (index) {
        case 0:
          tongji('1eff7d33-8394-4212-8fb4-8582b37a69fc');
          break;
        case 1:
          tongji('229d923a-ff4b-4a0e-ac5e-5c443e15951d');
          break;
        case 2:
          tongji('4b68c002-79c8-4ac9-843d-d12c8b6e374f');
          break;
      }
    },
    async getVideoListObj() {
      let where = JSON.stringify({
        articleCategory: '健康课堂', // 如存在，分类范围不能为空
        articleCategoryRange: 2 // 分类范围 1=当前分类 2=当前和子分类
        // articleType: 1 //文章类型 1=视频 2=文本
      });
      // where = String(where);
      const skip = 0;
      const limit = 20;
      const { data: videlList } = await getArticles({
        where,
        skip,
        limit
      });
      // 下面这没有封面图的给补充一个封面图
      const videoData = videlList.map((item) => {
        if (!item.videoCover) {
          item.videoCover = this.videoCover;
        }
        return item;
      });
      // 下面这取有封面的数据
      // const videoData = videlList.filter((item) => item.videoCover);

      let item = [];
      if (videoData.length > 4) {
        for (let i = 0; item.length < 4; i++) {
          let val = videoData[Math.floor(Math.random() * videoData.length)];
          let ifHave = item.some((res) => {
            return res.id === val.id;
          });
          if (!ifHave) {
            item.push(val);
          }
        }
      } else {
        item = videoData;
      }
      this.classVideoData = item;
    },
    async afterOnload(option) {
      // 获取当前用户相关信息
      try {
        this.userInfo = JSON.parse(wx.getStorageSync('rawData'));
      } catch (e) {
        console.log('e:', e);
      }

      if (option && option.patientId) {
        this.onLoadPatientId = option.patientId;
      }

      // 当前用户id
      this.patientId = this.onLoadPatientId || this.$store.state.join.patientid || wx.getStorageSync('patientId');

      // 获取家人关系，始终使用当前登录人的id
      this.getFamilyList(this.$store.state.join.patientid);
    },
    getKnowledgeList() {
      // 获取涨知识
      getArticles({
        where: JSON.stringify({
          articleCategory: '涨知识专题',
          articleCategoryRange: 1
        }),
        limit: 3,
        nearBy: 'desc'
      }).then((res) => {
        if (res.code === 0) {
          let resData = res.data;
          // mem1List 的长度
          this.knowledgeList = resData;
          this.knowledgeList.forEach((item) => {
            if (item.imgs) {
              item.imgs = item.imgs.split(',');
            } else {
              item.imgs = [
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png'
              ];
            }
          });

          // 按照创建时间倒序排列
          this.knowledgeList.sort((cur, next) => {
            if (next.createddate && cur.createddate) {
              return (
                new Date(next.createddate.replace(new RegExp(/-/gm), '/')) -
                new Date(cur.createddate.replace(new RegExp(/-/gm), '/'))
              );
            }
            return 0;
          });
          this.knowledgeListPicArt = this.knowledgeList.slice(1);
        } else {
          uni.showToast({ title: '获取故事文章失败' });
        }
      });
    },
    goIllForm() {
      this.$wxPromise.navigateTo({
        url: '/pages/getWelfareGold/illnessForm'
      });
    },
    goAskDoctorHistory() {
      // console.log('this.currentPatientHasVideoService:', this.currentPatientHasVideoService);
      uni.navigateTo({
        url: '/pages/service/askDoctorHistory?hasVideoService=' + this.currentPatientHasVideoService
      });
      tongji('95354a19-9e06-4f40-8ec2-bbbc96382020');
    },
    initData() {
      this.packageProduct = []; //  用户服务单下的服务产品列表
      this.showHealthAssessmentBtn = false;
      this.showHealthExaminationBtn = false;
      // this.isHealthExaminationBtnExpire = true;
      this.currentPatientHasVideoService = 0;
      this.loading = true;
    },

    goFamilyMember() {
      tongji('2f83ec94-a519-4a7c-8161-830f34e5d8c2');
      this.jumpPage('/pagesC/familyMember/index');
    },
    getCanAssistanceApplyObj() {
      const patientId = wx.getStorageSync('patientid');
      getCanAssistanceApply(patientId).then((res) => {
        if (res.code === 0 && res.data.length < 1) {
          this.power = false;
        } else {
          this.power = true;
        }
      });
    },

    initFamilyIndex() {
      let curFamilyIndex = -1;
      //
      if (this.onLoadPatientId) {
        for (let i = 0; i < this.familyList.length; i++) {
          let item = this.familyList[i];
          if (item.insuredId === this.onLoadPatientId) {
            curFamilyIndex = i;
            break;
          }
        }
      }
      if (!this.onLoadPatientId || curFamilyIndex === -1) {
        curFamilyIndex = 0;
      }

      // 默认一行能显示5个,index是从0开始的。一个家庭成员logo宽96，边距44，合计140
      if (curFamilyIndex >= 4) {
        this.familyScrollLeft = (curFamilyIndex - 4) * 140 + 'rpx';
      }
      this.changePerson(curFamilyIndex);
    },

    async changePerson(index, origin) {
      this.patientId = this.familyList[index].insuredId;
      this.familyIndex = index;
      this.initData();
      this.init();

      const r = await reportAll({
        patientId: this.patientId,
        hasRead: false
      });
      this.isMark = r.data || 0;

      if (origin === 'click') {
        // 点击用户头像
        tongji('de5f1500-c8b6-4652-99d0-726e572c7777');
      }
    },

    init() {
      // 获取当前用户的服务订单
      this.getInserviceById(this.patientId);

      this.getCanAssistanceApplyObj();
    },

    startHealthyPage() {
      const { relation } = this.familyList[this.familyIndex];
      this.$wxPromise.navigateTo({
        url: `/pagesB/healthyRecord/targetHistoryList?patientId=${this.patientId}&relation=${relation}`
      });
      tongji('f3ab8cfe-8362-46c8-8e17-459852731897');
    },
    goServiceList() {
      // 提到服务列表页
      this.$wxPromise.navigateTo({
        url: `/pages/service/serviceList?patientId=${this.patientId}`
      });
      tongji('501075dc-b54c-4977-adba-352c65d2f428');
    },

    startReportTalk() {
      tongji('517beaa9-c538-47cb-aab7-5fb8098bd647');
      // 跳转到评估报告列表页
      // const { relation, sex } = this.familyList[this.familyIndex];
      this.$wxPromise.navigateTo({
        url: `/pagesB/cardiovascularAssess/index`
        // url: `/pagesB/cardiovascularAssess/index?patientId=${this.patientId}&relation=${relation}&sex=${sex}`
      });
    },

    helpFamilyJoin() {
      // 友盟
      tongji('204148ba-6874-47d7-9aec-5cee3f24d08d');
      // 帮家人加入
      getUserInfoByPatientId(this.$store.state.join.patientid).then((res) => {
        if (res.code === 0 && res.data.realNameAuthenticationPassed === 1) {
          this.$wxPromise.navigateTo({
            url: '/pages/join/form?fromPage=1'
          });
        } else {
          this.$wxPromise.navigateTo({
            url: '/pages/join/authorIdentityChaeck'
          });
        }
      });
    },
    getFamilyList(patientId) {
      getFamilyData(patientId).then((res) => {
        this.loading = true;

        if (res.code !== 0) {
          uni.showToast({ title: '获取用户关系列表失败' });
          return;
        }
        const newUserInfo = [
          {
            relation: 1,
            patientId: patientId,
            insuredId: patientId,
            memberId: patientId,
            sex: null,
            status: null
          }
        ];
        let resDataOrigin = res.data.length > 0 ? res.data : newUserInfo;
        // 对家庭组进行排序，本人、父母、配偶、子女
        let familySort = [1, 3, 2, 4];
        let resData = [];
        let resObj = {};
        resDataOrigin.forEach((fData) => {
          let relation = fData.relation;
          if (resObj[relation]) {
            resObj[relation].push(fData);
          } else {
            resObj[relation] = [fData];
          }
        });
        familySort.forEach((fIndex) => {
          if (resObj[fIndex]) {
            resData = resData.concat(resObj[fIndex]);
          }
        });

        resData.forEach((item) => {
          item.insuredId = item.memberId;
          item.insuredName = item.memberName;
          // sex 1男  0为女
          if (item.sex === 1) {
            // 只有父母和子女需要区分性别
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/father.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/son.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/man.png';
            }
          } else {
            if (item.relation === 3) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/mother.png';
            } else if (item.relation === 4) {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/der.png';
            } else {
              item.src =
                'https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/woman.png';
            }
          }
          // 如果是本人的话，则使用微信头像
          if (item.relation === 1) {
            item.src = this.userInfo.avatarUrl || item.src;
          }
        });

        this.familyList = resData;
        // if (this.familyList.length) {
        //   this.patientId = this.familyList[0].insuredId;
        // } else {
        //   this.patientId = patientId;
        // }
        this.initFamilyIndex();
      });
    },
    /* eslint-disable*/
    getInserviceById(patientId) {
      // 获取用户服务订单
      // 接口  查询被保险人服务单  /insuranceOrder
      getInsuranceOrder(patientId).then((res) => {
        if (res.code !== 0) {
          uni.showToast({ title: '获取用户服务单失败' });
          return;
        }
        // 用户购买的服务订单
        let tempInserviceOrderList = res.data.filter((oData) => {
          // 只获取type为6的订单
          return oData.projectType === commonProjectType;
        });

        // 对inserviceOrderList 进行排序 按时间先后进行排序
        let temp2inserviceOrderList = tempInserviceOrderList.sort((item1, item2) => {
          return item2.orderDate - item1.orderDate;
        });

        // 判断是否显示健康评估按钮，要求：服务订单状态待非待激活且含有健管健教
        // let hasProductType3 = false
        // let hasProductType2 = false

        temp2inserviceOrderList.forEach((order) => {
          order.products.forEach((pro) => {
            if (order.status !== 2) {
              // 只要包含相关产品则显示对应的功能按钮
              if (pro.insuranceProductType === 3) {
                // 健教健管类
                // hasProductType3 = true
                this.showHealthAssessmentBtn = true;
              } else if (pro.insuranceProductType === 2) {
                // 体检类
                // hasProductType2 = true
                this.showHealthExaminationBtn = true;
              }
            }
            // 如果服务单状态为待激活或者已完成，且含有视频医生
            if (order.status === 2 || order.status === 3) {
              // 视频医生
              if (pro.insuranceProductType === 4) {
                this.currentPatientHasVideoService = 1;
              }
            }
          });
        });

        // if(!hasProductType3){
        //   this.showHealthAssessmentBtn = false;
        // }
        // if(!hasProductType2){
        //   this.showHealthExaminationBtn = false;
        // }
        this.loading = false;
      });
    },

    goKnowledge(item) {
      tongji('37336be0-1391-4081-a3a0-f0450a5281bf');
      this.$wxPromise.navigateTo({
        url: '/pages/learn/index'
      });
    },

    healthReport() {
      this.$wxPromise.navigateTo({
        url: '/pagesB/assessSick/assessHistoryListPage'
      });
      tongji('efdd0e9b-ddf4-4eef-b8b2-d59f60874a05');
    },

    // 跳转体检服务
    physicalExamination() {
      // if (!this.isHealthExaminationBtnExpire) {
      //   this.$wxPromise.navigateTo({
      //     url: '/pagesC/physicalExamination/list?patientId=' + this.patientId
      //   });
      // }
      this.$wxPromise.navigateTo({
        url: '/pagesC/physicalExamination/list?patientId=' + this.patientId
      });
      tongji('694d5a4c-a542-480a-9dd2-4184c096e448');
    },
    jumpPage(page) {
      this.$wxPromise.navigateTo({
        url: page
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@mixin itemCustomStyle {
  width: 700rpx;
  margin: auto;
  margin-top: 24rpx;
  border-radius: 24rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  display: flex;
  overflow: hidden;
}
@keyframes headRotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.class-title {
  position: relative;
  font-weight: bold;
  .class-more {
    position: absolute;
    right: 40rpx;
    top: 0;
    font-size: 24rpx;
    color: #b2b2b2;
  }
  .class-right {
    position: absolute;
    right: 0rpx;
    top: -0rpx;
    img {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
.main {
  margin-top: -1px;
  background: linear-gradient(184deg, #fb6f6f 0%, #f63434 100%);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 360rpx;
  width: 100%;
  overflow-x: hidden;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  position: relative;
  @supports not (constant(safe-area-inset-bottom)) {
    padding-bottom: 20rpx;
  }

  .loading {
    width: 102%;
    height: 102%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;

    img {
      width: 80rpx;
      height: 80rpx;
      margin-top: -200rpx;
      animation: headRotate 1s linear infinite;
    }
  }

  .i-bg-img {
    position: absolute;
    top: var(--status-bar-height);
    background-image: url('https://wanhuhealth.oss-cn-beijing.aliyuncs.com/wanhuhealth-small-program/wanhu-mini-welfare/welfare/index/t-bg.png');
    right: 30rpx;
    width: 420rpx;
    height: 320rpx;
    background-size: 100%;
  }
  .i-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    &.bgWhite {
      background: white;
    }
    .status-bar {
      position: relative;
      height: var(--status-bar-height);
      width: 100%;
    }
    .logo {
      width: 100%;
      z-index: 100;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      left: 25rpx;
      margin-top: 10rpx;
      img {
        width: 155rpx;
        height: 56rpx;
      }
    }
  }
  .family {
    width: 700rpx;
    background: #fff;
    margin: auto;
    margin-top: 210rpx;
    // border-radius: 24rpx;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    position: relative;
    padding-top: 10rpx; // 为了是让  family-content的圆角显示完整，要不然会有被切掉的感觉
    z-index: 0;
    .family-bg-red {
      overflow-x: scroll;
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 90rpx;
    }
    .family-content {
      padding: 32rpx 24rpx 0rpx;
      margin: auto;
      z-index: 100;
      position: relative;
      box-sizing: border-box;
      height: 218rpx;
      overflow-y: hidden;
      ::-webkit-scrollbar {
        width: 0 !important;
      }
      .family-line {
        width: 100%;
        height: 1rpx;
        background: #f60;
        position: absolute;
        left: 0;
        bottom: 0rpx;
      }
    }
    // .family-bg-white{
    //   height: 20rpx;
    //   position: relative;
    //   z-index: 100;
    //   background: white;
    //   width: 100%;
    // }
    .scroll-view_H {
      height: 220rpx;
      // overflow: visible;
    }
    .f-inner {
      display: flex;
      align-items: baseline;
      width: max-content;
      padding-right: 80rpx;
      width: 100%;
      height: 188rpx;
      $inActiveWidth: 96rpx;
      $activeWidth: 120rpx;

      .f-item {
        width: $inActiveWidth;
        height: inherit;
        margin-right: 44rpx;
        position: relative;
        &.active {
          width: $activeWidth;

          .f-logo {
            width: $activeWidth;
            height: $activeWidth;
            border-radius: $activeWidth;
            border: 6rpx solid #f60 !important;
          }
        }
        .f-logo {
          width: $inActiveWidth;
          height: $inActiveWidth;
          background: white;
          border-radius: $inActiveWidth;
          padding: 0rpx;
          box-sizing: border-box;
          overflow: visible;
          position: relative;
          background: #e3524b;
          // &.f-logo0 {
          //   background: none;
          //   border-radius: 16rpx;
          //   padding: 0;
          // }
          &.f-logo-self {
            border: 1px solid #e9f8ff;
          }
          &.f-b-imgw-boy {
            background: #e9f8ff;
          }
          &.f-b-imgw-girl {
            background: #ffefef;
          }
          .f-logo-img {
            width: 100%;
            height: 100%;
            border-radius: inherit;
          }
          .f-logo-img-icon {
            position: absolute;
            width: 80rpx;
            height: 32rpx;
            left: 50%;
            transform: translateX(-50%);
            bottom: -16rpx;
          }
        }
        .f-name {
          width: 100%;
          text-align: center;
          margin-top: 10rpx;
          font-size: 28rpx;
          height: 36rpx;
          line-height: 36rpx;
          border-radius: 36rpx;
          color: black;
          word-break: keep-all;
          overflow: hidden;
          &.active {
            background: #f60;
            color: white;
            font-weight: bold;
          }
        }
        .f-san {
          position: absolute;
          left: 50%;
          width: 0rpx;
          height: 0rpx;
          width: 18rpx;
          height: 18rpx;
          outline: 2rpx solid #f60;
          transform: rotate(45deg) translateX(-50%);
          background: white;
          bottom: -14rpx;

          // position: absolute;
          // width: 0rpx;
          // height: 0rpx;
          // left: 50%;
          // transform: translateX(-50%);
          // border-bottom: 12rpx solid #e8e8e8;
          // border-left: 12rpx solid transparent;
          // border-right: 12rpx solid transparent;
          // bottom: 4rpx;
          // overflow: visible;
          // &::before {
          //   position: absolute;
          //   content: '';
          //   width: 8rpx;
          //   height: 8rpx;
          //   top: 12rpx;
          //   left: -8rpx;
          //   background: white;
          // }
          // &::after {
          //   position: absolute;
          //   top: 4rpx;
          //   left: -8rpx;
          //   content: '';
          //   border-bottom: 8rpx solid white;
          //   border-left: 8rpx solid transparent;
          //   border-right: 8rpx solid transparent;
          //   bottom: -2rpx;
          // }
        }
        .f-w-line {
          position: absolute;
          width: 7rpx;
          height: 14rpx;
          left: 65rpx;
          transform: translateX(-50%);
          background: white;
          bottom: -11rpx;
        }
      }
      .f-add {
        width: 96rpx;
        height: 130rpx;
        margin-right: 40rpx;
        .f-a-btn {
          background: rgba(255, 255, 255, 0.2);
          color: white;
          text-align: center;
          width: 96rpx;
          height: 96rpx;
          line-height: 96rpx;
          color: white;
          font-size: 72rpx;
          position: relative;
          border-radius: 96rpx;
          image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 64rpx;
            height: 64rpx;
            transform: translate(-50%, -50%);
          }
        }
        .f-name {
          text-align: center;
          width: 100%;
          margin-top: 20rpx;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
    .p-user {
      width: 100%;
      height: 88rpx;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      margin: auto;
      display: flex;
      align-items: center;
      border-top: 1px solid #e8e8e8;
      margin-top: -2rpx;
      .p-u-logo {
        width: 40rpx;
        height: 40rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .p-u-name {
        margin-left: 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.55);
      }
      .p-u-line {
        margin: 0px 24rpx;
        border-left: 1rpx solid #e8e8e8;
        width: 0;
        height: 32rpx;
        line-height: 32rpx;
      }

      .p-u-goods {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.55);
      }
    }
  }
  // 服务包样式
  .order-wrap {
    // margin-top: 24rpx;
    .order {
      width: 700rpx;
      // border-radius: 24rpx;
      border-bottom-right-radius: 24rpx;
      border-bottom-left-radius: 24rpx;
      background: white;
      box-sizing: border-box;
      margin: auto;
    }

    .pkg-tip-wrap {
      width: 100%;
      background: white;
      border-radius: 24rpx;
      padding: 36rpx 0rpx;
      margin-top: 20rpx;
      .pkg-tip {
        width: 100%;
        height: 300rpx;
        font-size: 36rpx;
        color: #e8e8e8;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30rpx;
      }
    }
    .order-list-wrap {
      margin-top: 20rpx;
      padding: 36rpx 0rpx;
      background: white;
      padding-top: 26rpx;
      border-radius: 24rpx;
    }
  }

  .pkg {
    margin: auto;
    position: relative;
    padding: 0rpx 0rpx 55rpx;
  }
  .p-info {
    width: 700rpx;
    background: #fff1ef;
    padding: 36rpx 24rpx;
    box-sizing: border-box;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    border-top: 1rpx solid #e8e8e8;
    border-left: 1rpx solid #e8e8e8;
    border-right: 1rpx solid #e8e8e8;
    border-bottom: 1rpx solid #e8e8e8;
    margin: auto;
    .p-i-name-w {
      width: 100%;
      .p-i-name {
        font-size: 40rpx;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.9);
      }
      .p-i-status {
        margin-left: 16rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        font-weight: 400;
        padding: 4rpx 10rpx;
        color: white;
        height: 32rpx;
        line-height: 32rpx;
        word-break: keep-all;
      }
    }
    .p-i-operate {
      width: 100%;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
      .p-detail {
        font-size: 26rpx;
        font-weight: 400;
        color: #2680eb;
        margin-top: 10rpx;
      }
      .p-i-btn {
        width: 160rpx;
        height: 56rpx;
        border: 1px solid #f34e1c;
        border-radius: 28rpx;
        line-height: 56rpx;
        font-size: 24rpx;
        color: #f34e1c;
        text-align: center;
      }
    }

    .p-i-art {
      margin-top: 20rpx;
      .p-i-a-item {
        display: inline-block;
        font-size: 24rpx;
        color: #2680eb;
        opacity: 1;
        margin-right: 36rpx;
      }
    }
  }
  .p-prod {
    width: 700rpx;
    margin: auto;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    opacity: 1;
    border-radius: 0px 0px 16rpx 16rpx;
    box-sizing: border-box;
    margin-top: -2px;
  }
  .order-checkpro-btn {
    margin-top: 48rpx;
    font-size: 24rpx;
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
  }
  .order-line {
    display: none;
    position: relative;
    height: 0rpx;
    border-top: 1rpx solid #e8e8e8;
    margin: auto;
    z-index: 1;
    height: 48rpx;
    margin-top: 48rpx;
    .o-l-left {
      width: 48rpx;
      height: 48rpx;
      border-radius: 48rpx;
      background: $uni-bg-color;
      position: absolute;
      left: -20rpx;
      top: 24rpx;
      top: -24rpx;
    }
    .o-line {
    }
    .o-l-right {
      width: 48rpx;
      height: 48rpx;
      border-radius: 48rpx;
      right: -20rpx;
      top: 24rpx;
      background: $uni-bg-color;
      position: absolute;
      top: -24rpx;
    }
  }
  .order-arrow {
    width: 48rpx;
    height: 48rpx;
    margin: auto;
    margin-bottom: 48rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .g-title {
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.55);
    opacity: 1;
    margin: auto;
    width: 700rpx;
    padding: 48rpx 24rpx 0rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
  }
  .goods {
    position: relative;
    border-radius: 16rpx;
    box-sizing: border-box;
    position: relative;
    margin: auto;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .g-info {
      .g-i-name {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        width: 460rpx;
        .g-i-name-statusName {
          background: #f25559;
          margin-left: 5rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
          font-weight: 400;
          padding: 4rpx 10rpx;
          color: white;
          height: 32rpx;
          line-height: 32rpx;
          word-break: keep-all;
        }
      }
      .g-i-com {
        width: 248rpx;
        margin-top: 24rpx;
        height: 40rpx;
        border: 1px solid #f34e1c;
        border-radius: 8rpx;
        text-align: center;
        line-height: 40rpx;
        font-size: 24rpx;
        color: #f34e1c;
      }
      .g-i-peroid {
        display: flex;
        margin-top: 32rpx;
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.3);
        .g-i-p-start {
        }
        .g-i-p-start {
        }
      }
      .g-i-art {
        display: flex;
        margin-top: 40rpx;
        .g-i-a-item {
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
        }
      }
    }
    .g-apply {
      position: absolute;
      // top: 50%;
      // transform: translateY(-50%);
      right: 24rpx;
      width: 160rpx;
      height: 56rpx;
      border: 1px solid #f34e1c;
      border-radius: 32rpx;
      text-align: center;
      font-size: 24rpx;
      line-height: 56rpx;
      color: #f34e1c;
    }
  }
  .medicine {
    margin: auto;
    box-sizing: border-box;
    border-radius: 16rpx;
    position: relative;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .m-left {
      // width: 400rpx;
      .m-title {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
        width: 460rpx;
      }
      .m-hz {
        margin-top: 16rpx;
        font-size: 24rpx;
        color: rgba(0, 0, 0, 0.3);
        display: flex;
      }
      .m-i-art {
        margin-top: 40rpx;
        .m-i-a-item {
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
          display: inline-block;
        }
      }
    }
    .m-right {
      position: absolute;
      width: 160rpx;
      height: 56rpx;
      right: 24rpx;
      // top: 50%;
      // transform: translateY(-50%);
      bottom: 24rpx;
      border: 1px solid #f34e1c;
      border-radius: 28rpx;
      line-height: 56rpx;
      font-size: 24rpx;
      color: #f34e1c;
      text-align: center;
    }
    .fl-btn {
      position: absolute;
      // top: 50%;
      // transform: translateY(-50%);
      bottom: 0rpx;
      right: 24rpx;
      align-self: flex-end;
      width: 160rpx;
      height: 56rpx;
      border: 1px solid #f34e1c;
      border-radius: 28rpx;
      line-height: 56rpx;
      font-size: 24rpx;
      color: #f34e1c;
      text-align: center;
    }
  }

  .fl-list {
    box-sizing: border-box;
    margin: auto;
    border-radius: 16rpx;
    height: 100rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0px 24rpx;
    .fl-item {
      width: 100%;
      height: 56rpx;
      align-items: center;
      position: relative;
      .fl-logo {
        width: 80rpx;
        height: 80rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .fl-con {
      }
      .fl-des {
        text-align: left;

        .fl-name {
          font-size: 32rpx;
          color: rgba(0, 0, 0, 0.9);
          width: 460rpx;
        }
        .fl-info {
          font-size: 24rpx;
          color: rgba(12, 6, 6, 0.3);
          margin-top: 16rpx;
        }
      }
      .fl-i-art {
        display: flex;
        margin-top: 16rpx;
        .fl-i-a-item {
          display: inline-block;
          font-size: 24rpx;
          color: #2680eb;
          opacity: 1;
          margin-right: 36rpx;
        }
      }
      .fl-btn {
        position: absolute;
        // top: 50%;
        // transform: translateY(-50%);
        bottom: 0rpx;
        right: 0rpx;
        align-self: flex-end;
        width: 160rpx;
        height: 56rpx;
        border: 1px solid #f34e1c;
        border-radius: 28rpx;
        line-height: 56rpx;
        font-size: 24rpx;
        color: #f34e1c;
        text-align: center;
      }
    }
  }
  .his {
    margin-top: 44rpx;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
    padding-bottom: 44rpx;
  }
  .serviceArticleList {
    // 显示服务详情列表
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.55);
    .s-inner {
      position: absolute;
      top: 5%;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 10;
      width: 700rpx;
      height: 90%;
      padding: 0rpx 40rpx 32rpx;
      box-sizing: border-box;
      background: white;
      border-radius: 24rpx;
      .s-header {
        width: 100%;
        height: 120rpx;
        line-height: 120rpx;
        position: relative;
        .s-title {
          font-size: 36rpx;
          font-weight: bold;
          color: rgba(0, 0, 0, 0.9);
          text-align: center;
        }
        .s-icon {
          width: 40rpx;
          height: 40rpx;
          position: absolute;
          right: 0;
          top: 40rpx;
        }
      }
      .s-cont {
        .s-c-item {
          height: 60rpx;
          line-height: 60rpx;
          color: #2680eb;
        }
      }
    }
  }
}

.unLogin {
  text-align: center;
  width: 700rpx;
  border-radius: 24rpx;
  margin: auto;

  margin-top: 250rpx;
  background-size: contain;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 24rpx;
  background: white;
  .img {
    text-align: center;
    padding: 24rpx;
    img {
      width: 448rpx;
      height: 174rpx;
    }
  }
  .loginBtn {
    color: #fff;
    font-size: 32rpx;
    span {
      display: inline-block;
      width: 300rpx;
      height: 72rpx;
      line-height: 72rpx;
      background: -webkit-linear-gradient(right, #10aeff 0%, #2680eb 100%);
      background: linear-gradient(to left, #10aeff 0%, #2680eb 100%);
      border-radius: 36rpx;
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      margin: 20rpx auto;
    }
  }
}
.orderTitle {
  color: rgba(0, 0, 0, 0.6);
  font-size: 32rpx;
  position: relative;
  padding-left: 20rpx;
  width: 700rpx;
  margin: auto;
  margin-bottom: 20rpx;
}
.orderTitle::before {
  position: absolute;
  left: 0;
  top: 8rpx;
  content: '';
  width: 6rpx;
  height: 32rpx;
  border-left: 6rpx solid rgba(243, 78, 28, 1);
}
.h-inner {
  height: 260rpx;
}
.service-banner {
  width: 100%;
  height: 260rpx;
  margin: auto;
  margin-bottom: 30rpx;
  // &.service-banner-call {
  //   height: 200rpx;
  //   margin: auto;
  //   padding-top: 44rpx;
  // }
  img {
    width: 100%;
    height: 100%;
  }
}
.plan {
  @include itemCustomStyle;
  padding: 28rpx 24rpx 32rpx;
  height: 424rpx;
  display: block;
  background: white;
  .plan-title {
    font-size: 32rpx;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
  }
  .plan-swiper {
    margin-top: 16rpx;
    width: 654rpx;
    height: 296rpx;
    border-radius: 16rpx;
    overflow: hidden;
  }
  .plan-img {
    width: 100%;
    height: 100%;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
.know {
  @include itemCustomStyle;
  padding: 28rpx 24rpx 32rpx;
  display: block;
  background: white;
  .k-title {
    font-size: 32rpx;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
  }
  .class-title {
    position: relative;
    font-weight: bold;
    .class-more {
      position: absolute;
      right: 40rpx;
      top: 0;
      font-size: 24rpx;
      color: #b2b2b2;
    }
    .class-right {
      position: absolute;
      right: 0rpx;
      top: -0rpx;
      img {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .k-swiper {
    margin-top: 16rpx;
    border-radius: 16rpx;
    overflow: hidden;
    .k-img {
      width: 654rpx;
      height: 296rpx;
      position: relative;
      image {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .k-img-btn {
        width: 136rpx;
        height: 56rpx;
        line-height: 56rpx;
        background: linear-gradient(186deg, #fe894d 0%, #ef3931 100%);
        text-align: center;
        font-size: 24rpx;
        color: white;
        border-radius: 24rpx;
        position: absolute;
        bottom: 24rpx;
        left: 24rpx;
      }
    }
  }
  .k-item-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24rpx;
    .k-item {
      width: 316rpx;
      align-items: center;
      position: relative;
      .k-logo {
        width: 316rpx;
        height: 142rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .k-des {
        margin-top: 24rpx;
        text-align: left;
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.9);
      }
    }
  }

  .k-btn {
    margin-top: 24rpx;
    text-align: center;
    font-size: 28rpx;
    color: rgba(38, 128, 235, 1);
  }
  .classList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .list {
      width: 316rpx;
      height: auto;
      margin: 20rpx 0 10rpx 0;
      .images {
        width: 100%;
        text-align: center;
        img {
          width: 100%;
          height: 180rpx;
          max-width: 100%;
        }
      }
      .name {
        font-size: 28rpx;
        display: -webkit-box;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
    .clear {
      clear: both;
      overflow: hidden;
      height: 0;
    }
  }
}

.healthPannel {
  .radiosListWrap {
    min-height: 210rpx;
    position: relative;
    .radio-loading {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      background: white;
      z-index: 1000;
      img {
        width: 60rpx;
        height: 60rpx;
        animation: headRotate 2s linear infinite;
      }
    }
    .radiosList {
      display: inline-block;
      width: 25%;
      height: auto;
      margin-top: 30rpx;
      .icon {
        width: 120rpx;
        height: 120rpx;
        position: relative;
        // background-color: rgba(233, 248, 255, 1);
        border-radius: 100%;
        margin: auto;
        &.icon-expire {
          overflow: hidden;
        }
        &.icon-red {
          background-color: #ffefef;
        }
        img {
          width: inherit;
          height: inherit;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .expire-txt {
          display: inline-block;
          width: 100%;
          height: 40rpx;
          text-align: center;
          background: rgba(0, 0, 0, 0.4);
          line-height: 40rpx;
          color: #e8e8e8;
          font-size: 24rpx;
          position: absolute;
          bottom: 0;
        }
      }
      .mark {
        width: 24rpx;
        height: 24rpx;
        background: red;
        border-radius: 50%;
        position: absolute;
        top: 0px;
        right: 8rpx;
        z-index: 100;
      }
      .name {
        color: rgba(0, 0, 0, 0.9);
        font-size: 28rpx;
        text-align: center;
        margin-top: 24rpx;
        &.name-expire {
          color: #999;
        }
      }
    }

    .bgOrigin {
      .icon {
        background-color: #ffefef;
      }
    }
  }
}
.spread-opr {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.55);
  width: 100%;
  margin-top: 20rpx;
  text-align: center;
  height: 40rpx;

  .opr {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .opr-down {
    .opr-img-wrap {
      margin-top: -10rpx;
    }
  }
  .opr-txt {
    display: inline-block;
  }
  .opr-img-wrap {
    width: 24rpx;
    height: 24rpx;
    display: inline-block;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .opr-up {
    image {
      transform: rotate(180deg);
    }
  }
}
</style>
